<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="110px"
    >
      <el-form-item label="产品名称" prop="productName">
        <el-input
          v-model="queryParams.productName"
          placeholder="请输入产品名称"
          clearable
          @keyup.enter="handleQuery"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item label="产品编号" prop="productNumber">
        <el-input
          v-model="queryParams.productNumber"
          placeholder="请输入产品编号"
          clearable
          @keyup.enter="handleQuery"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item label="客户名称" prop="customName">
        <el-input
          v-model="queryParams.customName"
          placeholder="请输入客户名称"
          clearable
          @keyup.enter="handleQuery"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item label="订单类型" prop="dictOrderType">
        <el-select
          v-model="queryParams.dictOrderType"
          placeholder="请选择订单类型"
          clearable
          class="!w-220px"
        >
          <el-option
            v-for="dict in getIntDictOptions('market_order_type')"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="时间选择" prop="queryYear">
        <el-date-picker
          v-model="queryParams.queryYear"
          value-format="YYYY"
          type="year"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery" type="primary">搜索</el-button>
        <el-button @click="resetQuery"> 重置</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <div style="width: 100%; height: 50px; display: flex; justify-content: space-between">
      <div>
        <el-button
          type="primary"
          @click="handleExport"
          :loading="exportLoading"
          v-hasPermi="['reportQuery:produce:summaryOfOutput:export']"
        >
          数据导出
        </el-button>
      </div>
    </div>
    <el-table
      ref="multipleTableRef"
      border
      row-key="id"
      :height="tableHeight"
      v-loading="loading"
      :data="list"
      @selection-change="handleSelectionChange"
      :cell-style="{'padding':0}"
      :header-row-style="{'padding':0}"
    >
      <el-table-column
        align="center"
        width="60"
        :reserve-selection="true"
        type="selection"
        fixed="left"
      />
      <el-table-column type="index" width="60" align="center" header-align="center" label="序号" />
      <el-table-column
        v-for="(item, index) in tableTitleList"
        :key="index"
        :min-width="item.width"
        :header-align="item.headerAlign"
        :align="item.align"
        :label="item.label"
        :prop="item.field"
      >
        <template #default="scope">
          <dict-tag v-if="item.dictType" :type="item.dictType" :value="scope.row[item.field]" />
          <span v-else>{{ scope.row[item.field] }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="item" header-align="center" v-for="(item,index) in monthTitleList" :key="item">
        <el-table-column
          header-align="left"
          width="120"
          align="left"
          label="完工数（%）"
          :prop="`completeRate${index + 1}`"
        />
        <el-table-column
          header-align="left"
          width="150"
          align="left"
          label="产值"
          :prop="`output${index + 1}`"
        />
      </el-table-column>
      <el-table-column label="合计" header-align="center">
        <el-table-column
          header-align="left"
          width="120"
          align="left"
          label="完工数（%）"
          prop="completeRateAll"
        />
        <el-table-column
          header-align="left"
          width="150"
          align="left"
          label="产值"
          prop="outputAll"
        />
      </el-table-column>
      <el-table-column label="剩余" header-align="center">
        <el-table-column
          header-align="left"
          width="120"
          align="left"
          label="完工数（%）"
          prop="completeRateSurplus"
        />
        <el-table-column
          header-align="left"
          width="150"
          align="left"
          label="产值"
          prop="outputSurplus"
        />
      </el-table-column>
    </el-table>
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 导出 -->
  <ExportFile ref="exportRef" @download="downloadFun" />
</template>

<script setup lang="ts" name="CourseWelding">
   import { getIntDictOptions } from '@/utils/dict'
   import download from '@/utils/download'
   import * as summaryOfOutput from '@/api/reportQuery/produce/summaryOfOutput'
   const loading = ref(true) // 列表的加载中
   const total = ref(0) // 列表的总页数
   const list = ref([]) // 列表的数据
   const queryParams = reactive({
     pageNo: 1,
     pageSize: 50,
     productName: null,
     productNumber: null,
     customName: null,
     dictOrderType: null,
     queryYear: null
   })
   const queryFormRef = ref() // 搜索的表单
   const multipleTableRef = ref()
   const exportLoading = ref(false) // 导出的加载中

   const tableTitleList = ref([
     {
       field: 'productName',
       width: 200,
       headerAlign: 'left',
       align: 'left',
       label: '产品名称'
     },
     {
       field: 'productNumber',
       width: 200,
       headerAlign: 'left',
       align: 'left',
       label: '产品编号'
     },
     {
       field: 'customerName',
       width: 150,
       headerAlign: 'left',
       align: 'left',
       label: '客户名称'
     },
     {
       field: 'productStandard',
       width: 150,
       headerAlign: 'left',
       align: 'left',
       label: '产品规格'
     },
     {
       field: 'dictOrderStatus',
       width: 100,
       headerAlign: 'left',
       align: 'left',
       label: '订单状态',
       dictType: 'order_task_book_status'
     },
     {
       field: 'dictOrderType',
       width: 100,
       headerAlign: 'left',
       align: 'left',
       label: '订单类型',
       dictType: 'market_order_type'
     },
     {
       field: 'orderQuantity',
       width: 100,
       headerAlign: 'left',
       align: 'left',
       label: '数量'
     },
     {
       field: 'quotation',
       width: 150,
       headerAlign: 'right',
       align: 'right',
       label: '价格（万）'
     }
   ]) // 表头列表
   const monthTitleList = ref(['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'])
   /** 查询列表 */
   const getList = async () => {
     loading.value = true
     try {
       const data = await summaryOfOutput.getSummaryOfOutputPage(queryParams)
       list.value = data.list
       total.value = data.total
     } finally {
       loading.value = false
     }
   }
   /**选中 */
   const selectList = ref([])
   const handleSelectionChange = (data) => {
     selectList.value = data
   }

   /** 搜索按钮操作 */
   const handleQuery = () => {
     queryParams.pageNo = 1
     getList()
   }

   /** 重置按钮操作 */
   const resetQuery = () => {
     queryFormRef.value.resetFields()
     handleQuery()
   }
   /** 导出按钮操作 */
   const exportRef = ref()
   const handleExport = () => {
     exportRef.value.open()
   }
   // 导出
   const downloadFun = async () => {
     const val = exportRef.value.params
     let params = {
       fileName: val.name,
       ids: ''
     }
     if (val.range === 'all') {
       params.ids = ''
     } else {
       params.ids = selectList.value.map((item) => item.id)
     }
     summaryOfOutput.exportSummaryOfOutput(params).then((res) => {
       download.excel(res, val.name)
       clearSelectData()
     })
   }
   //清空多选
   const clearSelectData = () => {
     selectList.value = []
     multipleTableRef.value!.clearSelection()
   }

   /** 初始化 **/
   const tableHeight = ref(0)
   onMounted(() => {
     const queryParamsHeight = queryFormRef.value.$el.clientHeight + 2
     tableHeight.value = document.body.clientHeight - 132 - queryParamsHeight - 127
     getList()
   })
</script>
<style lang="scss" scoped>
   .fontHide {
     width: 100%;
     height: 100%;
     white-space: nowrap;
     text-overflow: clip;
     overflow: hidden;
   }
</style>